<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>快递查询</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">				
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/swiper.min.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script src="../../js/jquery2.2.4.min.js"></script>
		<style>
			body,html{background-color: #E8F7FF;}
			.mui-bar-nav{background:transparent;}
			.mui-content{position:absolute;top:0;left:0;/*height:100%;*/background:url(../../images/jindu/kuaidi.png)  no-repeat;background-size:100% 100%;}
		    .jindu_content{width:7.2rem;background:#fff;border-radius:.1rem;overflow:hidden;margin:4.9rem auto 0 auto;padding:0 .22rem;box-sizing:border-box;}
	        .jindu_content>h5{margin:.35rem 0 .48rem 0;width:100%;float:left;font-size:.28rem;color:#666;line-height:.4rem;}
		    .form_cont{width:100%;float:left;}
			.form_cont .form_cont_list{width:6.75rem;float:left;border:1px solid #d4d4d4;border-radius:.08rem;height:.85rem;margin-bottom:.33rem;position:relative;}
			.form_cont .form_cont_list>.dian{width:.11rem;height:.11rem;float:left;border-radius:50%;margin:.36rem 0 0 .3rem;background:#ff2222;}
			.form_cont .form_cont_list>.form_control{width:5.05rem;float:left;height: .45rem; line-height: .45rem; margin-top: .2rem;  color:#666;font-size:.3rem;border:none;background:transparent;}
			.form_cont .form_cont_list>.mui-icon-arrowdown{position:absolute;top:.23rem;right:.4rem;font-size:.4rem;color:#222;}
			input[placeholder], [placeholder], *[placeholder] {color:#c7c7cd !important;}
			.form_cont .mui-btn-primary{width:6.8rem;height:.85rem;background:#1653fc;color:#fff;border-radius:.1rem;overflow:hidden;margin:.9rem 0 .23rem 0;float:left;font-size:.32rem;border:1px solid #1653fc;}
		    .form_cont .form_cont_list>.bg_blue{background:#1653fc;}
		    .form_cont .form_cont_list>.bg_orange{background:#ff9c00;}
		    .code{color:#1653fc;font-size:.3rem;position:absolute;top:.21rem;right:.15rem;}
		    .exp{width:100%;float:left;margin:0;color:#999;font-size:.28rem;}
		    .exp>img{width:.3rem;float:left;margin-right:.15rem;margin-top:.05rem;}
		    .form_cont .mui-btn-gray{background:#eee;border:1px solid #cccccc;color:#666666;margin:0;}
		    .line_cont{width:4.9rem;margin:2.4rem auto .6rem 1rem;position:relative;float:left;border-top:1px solid #a9a9a9;height:.3rem;}
		    .line_cont>span{width:1.8rem;background:#fff;position:absolute;line-height:.33rem;text-align:center;color:#999;font-size:.28rem;top:-.2rem;left:1.5rem;}
	        .question{width:.42rem;height:.42rem;float:right;background:url(../../images/jindu/question.png) no-repeat;background-size:100% auto;margin:.19rem .22rem 0 0}
		</style>
	</head>
	<body>
		<div class="mui-content" id="mui-content">
			<!--头部-->
			<div class="mui-bar mui-bar-nav" id="header">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title">快递查询</h1>
			</div>
			<div class="jindu_content" id="app">
				<h5>实时、快速、准确的的EMS快递单号查询，能查询到EMS快递从收件、派送到签收等各个环节的状态。</h5>
				<form class="form_cont">
					<a class="form_cont_list">
						<i class="dian"></i>
						<input type="text" id="logisticsNumber" class="form_control" placeholder="请输入快递编号">
						<span class="question" id="info"></span>
					</a>
					<input type="button" class="mui-btn mui-btn-primary" id="button_query" value="搜  索">
				</form>
				<div class="line_cont"><span>让办事更简单</span></div>
			</div>
		</div>
	<script>
		function my_immersed(immersed){
			document.getElementById("mui-content").style.paddingTop = immersed + 'px';
			document.getElementById("header").style.top = immersed + 'px';
			document.getElementById("app").style.marginTop = '4.0rem';
		}
	</script>
	<script type="text/javascript" src="../../js/immersed.js" ></script>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script>
			mui.plusReady(function(){
				closeWaitingAndShowView(); 
			});
			document.getElementById("info").addEventListener('click', function() {
				mui.alert('请输入8-13位快递编号');
				return false;
			},false);
			
			
		/**
		 * 点击搜索，跳转到查询快递信息
		 */
		document.getElementById("button_query").addEventListener('click',function () {
			doSearch();
		});
		
		
		//搜索input监听
		document.getElementById('logisticsNumber').addEventListener('search', function() {
			doSearch();
		});
		
		function doSearch(){
			var  logisticsNumber=document.getElementById('logisticsNumber').value;
			if(logisticsNumber!=''){
				var length=logisticsNumber.length;
				if(length>7&&length<14){
					var param = {};
					param.logisticsNumber = logisticsNumber;
					utils.showWaiting();
					showTemplates("../bianmin/kuaidi_info.html", "快递详情", '../bianmin/kuaidi_info.html?'+jsonToParams(param,true));
				}else{
					mui.toast('快递编号必须为8-13位')
				}
			}else{
				mui.toast('请输入快递编号')
			}
		}
	</script>
	</body>
</html>
